<!DOCTYPE html>

<!-- $Id: progressbar.html 4 2012-04-06 08:42:07Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<title>progressbar</title>

<link href="960c12.css" rel="stylesheet" type="text/css"/>

<link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.min.css" rel="stylesheet" type="text/css"/> 
<!--[if IE]><link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.ie.min.css" rel="stylesheet" type="text/css"/><![endif]-->

<link href="../release/themes/grey.min.css" rel="stylesheet" type="text/css"/> 

<script src="http://code.jquery.com/jquery.min.js" charset="utf-8" type="text/javascript"></script>
<script src="../release/jquery.ys.min.js"></script>

<style>

body { margin: 1em; }

.ex2 { height: 20px; width: 175px; border-radius: 4px; }
.ex3 { height: 2px; width: 150px; border-radius: 0; margin-top: 10px; }

</style>

<script>

$(document).ready(function () {

	$.ys.progressbar.create('.ex1, .ex2', { value: 25, duration: 'slow', easing: 'ys-bounce' })

	$.ys.progressbar.create('.ex3', {
		onchange: function (val, $ex3) {
			$ex3.parent().children('span:eq(0)').text('' + parseInt(val) + '%')
		}
	})

	var value = 0.0
	var interval = setInterval(function () {
		value += 2.35
		if (value > 100) {
			value = 100;
			clearInterval(interval)
		}
		$('.ex3').val(value)
	}, 150)
})

</script>

</head>

<body>

	<table class="layout form">
		<tr>
			<th>static progressbar (25 percents)</th>
			<td><div class="ex1 ys-progressbar"></div></td>
		</tr>
		<tr>
			<th>static progressbar (50 percents)</th>
			<td><div class="ex2 ys-progressbar" data-ys-progressbar-value="50"></div></td>
		</tr>
		<tr>
			<th>dynamic progressbar</th>
			<td>
				<div class="ex3 ys-progressbar left"></div>
				<span class="right"></span>
			</td>
		</tr>
	</table>

</body>